<template>
    <div class="mian-box">
        <websitetop :active="3"></websitetop>
        <div class="banner">
            <el-carousel height="960px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="body-box">
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">案例</div>
                </div>
                <div class="text-h33">
                    <div>知品屋海南自贸岛仓储式旗舰店</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox" style="align-items: flex-start;">
                        <div class="img-box" style="width: 638px;width: 474px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img07.png" alt="">
                        </div>
                        <div class="box-mian-text">
                            <div class="text-h27">海南自贸岛唯一综保区内商场、日用消费品岛民免税压力测试点</div>
                            <div>海口综保区获得海关总署批准进行跨境商品展示展销和快速提货试点、前店后仓、前店后厂试点。
                                知品屋海南自贸岛仓储式旗舰店开设于海口国际商品展示交易中心，位于海口综保区内，是目前海南进口商品种类最多、功能最全的展销中心，集展示、交易、拍卖、新品发布、品鉴、收藏、文化等为一体的全省最大国际商品展示交易平台。
                                </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="box-one" style="background-color: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">知品屋实体店矩阵</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox">
                        <div class="img-box" style="width: 614px;height: 538px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img08.png" alt="">
                        </div>
                        <div>
                            <div class="st-samllbox" style="margin-bottom: 70px;">
                                <div class="time-text">2023年三季度开业：</div>
                                <div class="are-text">
                                    <span class="where">两江新区综保区：</span>知品屋旗舰店<span style="color: red;">1</span>家，智慧社区店<span style="color: red;">1</span>家 <br>
                                    <span  class="where">涪陵综保区：</span>知品屋联名旗舰店<span style="color: red;">1</span>家 <br>
                                    <span  class="where">璧山区：</span>知品屋联名旗舰店<span style="color: red;">1</span>家。
                                    
                                </div>
                            </div>
                            <div class="st-samllbox">
                                <div class="time-text">2023年四季度开业：</div>
                                <div class="are-text">
                                    知品屋校园店<span style="color: red;">6</span>家 <br>创业加盟店<span style="color: red;">3</span>家 <br>知品屋分销商（线上）<span style="color: red;">250</span>组 <br>知品屋加盟店（线上）<span style="color: red;">2</span>家
                                    
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
            <div class="box-one">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">知品屋跨境电商新零售校园店 </div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox">
                        <div class="img-box" style="width: 402px;height: 446px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img09.png" alt="">
                        </div>
                        <div class="box-mian-text" style="width: 841px;height: 446px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img10.png" alt="">
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="box-one" style="background: #fff;">
                <div class="box-title">
                    <div style="margin: 0 auto;margin-top: 139px;">客户案例</div>
                </div>
                <div class="text-h33">
                    <div>国展全球市集——实体店赋能</div>
                </div>
                <div class="box-mian">
                    <div class="box-mian-bigbox">
                        <div class="img-box" style="width: 1296px;height: 430px;">
                            <img style="width: 100%;height: 100%;" src="../../assets/img/home/img11.png" alt="">
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="footer-box">
                <div class="box-title" style="color: #fff;">
                    <div style="margin: 0 auto;margin-top: 139px;">赋能实体经济数字化</div>
                </div>
                <div class="footer-box-btn">
                    <div class="footer-text">联系我们</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import websitetop from './websitetop'
    export default {
        components: {
            websitetop
        },
        data() {
            return {

            }
        },
        created() {

        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .mian-box {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    
    .banner {}
    
    .body-box {
        display: flex;
        flex-direction: column;
    }
    
    .box-one {
        height: 900px;
        background: #F4F4F8;
        min-width: 1280px;
    }
    
    .box-title {
        display: flex;
        font-size: 51px;
        color: #1F1F1F;
        font-weight: 700;
        font-family: Source Han Sans CN;
    }
    
    .box-mian {
        display: flex;
        margin: 0 auto;
    }
    
    .img-box {
        width: 715px;
        height: 443px;
    }
    
    .box-mian-text {
        width: 527px;
        height: 250px;
        font-size: 21px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #1F1F1F;
        line-height: 50px;
        margin-left: 41px;
    }
    
    .box-mian-bigbox {
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 105px;
    }
    
    .small-box {
        width: 398px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .small-box-title {
        color: #2B2F79;
        font-size: 42px;
        font-weight: 700;
    }
    
    .small-box-value {
        margin-top: 27px;
        font-size: 27px;
        color: #323232;
    }
    
    .small-box-textbox {
        margin-top: 45px;
        background: #F4F4F8;
        border-radius: 15px;
        height: 374px;
        width: 100%;
    }
    
    .small-box-textbox-text {
        font-size: 17px;
        color: #323232;
        line-height: 31px;
        width: 306px;
        margin: 0 auto;
        margin-top: 19px;
    }
    
    .small-box-img {
        width: 398px;
        height: 200px;
    }
    
    .text-h19 {
        font-size: 19px;
        font-weight: 700;
        color: #323232;
        line-height: 30px;
    }
    
    .text-h15 {
        margin-top: 15px;
        font-size: 15px;
        line-height: 25px;
        color: #323232;
        display: -webkit-box;
        /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 2;
        /* 控制最多显示几行 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        overflow: hidden;
    }
    
    .next {
        margin-top: 15px;
        font-size: 15px;
        color: #323232;
        cursor: pointer;
    }
    
    .footer-box {
        height: 490px;
        background: #2B2F79;
        min-width: 1280px;
    }
    
    .footer-box-btn {
        margin: 0 auto;
        margin-top: 94px;
        width: 283px;
        height: 61px;
        background: #FFFFFF;
        border-radius: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .footer-text {
        font-size: 29px;
        color: #1F1F1F;
    }
    
    .text-h33 {
        color: #2B2F79;
        font-weight: 700;
        font-size: 33px;
        margin-top: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .text-h27 {
        color: #2B2F79;
        line-height: 42px;
        width: 524px;
        font-size: 27px;
        margin-bottom: 40px;
    }
    
    .time-text {
        font-size: 29px;
        color: #2B2F79;
    }
    
    .are-text {
        font-size: 21px;
        color: #1F1F1F;
        line-height: 42px;
        margin-top: 35px;
    }
    
    .where {
        color: #1F1F1F;
        font-weight: 700;
    }
</style>